<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1"> 
		<meta name="viewport" content="initial-scale=1.0,width=device-width,user-scalable=0,maximum-scale=1.0"/>  
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>摇一摇有惊喜</title>
		<link rel="stylesheet" type="text/css" href="css/minireset.css"/>
		<link rel="stylesheet" type="text/css" href="css/animate.css"/>
		<link rel="stylesheet" type="text/css" href="css/weui.min.css"/>
		<link rel="stylesheet" type="text/css" href="css/font/fzzd/fzzd.css"/>
		<link rel="stylesheet" type="text/css" href="css/style.css?11"/>
	</head>
	<body class="animated">
		<div style="audio " >
			<audio id="sound" src="./sound/5018.mp3" ></audio>
		</div>
		<div class="content content_base zoomIn">
			<div class="liner">
				<div class="show_banner" onclick="shakeEventDidOccur()"/>
					<img src="img/shake_pro.png"/>
				</div>
				<p class="count"><span>今日还有<i class="countNum">0</i>次机会</span></p>
			</div>
		</div>
		<div class="content content_re_base none">
			<div class="user_img">
				<img src="img/user_none.png"/>
			</div>
			<div class="big_title">
				<p>当前获得奖券</p>
			</div>
			<div class="already none">
				<div>你已领过该礼包，分享礼包朋友也“摇”有惊喜</div>
			</div>
			<div class="voucher voucher_show" style="">
				<!--<div class="voucher_title">
					闺蜜券
				</div>
				<div class="voucher_content">
					最多4名女性同行8折优惠
				</div>-->
			</div>
			<div class="voucher voucher_none none">
				<!--<div class="voucher_list ">
					<p>微信卡券使用小提示：</p>
					<p>1.卡券位置：微信-我-优惠券中查看</p>
					<p>2.根据卡券使用门店使用</p>
					<p>3.查看卡券使用详情，使用核销</p>
				</div>-->
			</div>
			<div class="share_btn open" >
				<button id="open">打开礼包</button>
			</div>
			<div class="share_btn share none" >
				<button id="share">分享礼包</button>
			</div>
		</div>
	</body>
	<script src="js/flex.js?22" type="text/javascript" charset="utf-8"></script>
	<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/shake.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/request.js" type="text/javascript" charset="utf-8"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
			var is_shared = 0; //是否分享过
			var count = 0; //剩余可摇一摇次数
			var innerCount = document.querySelector(".countNum");
			var cardId = ""

			//调用shake事件
		    var myShakeEvent = new Shake({
		        threshold: 10
		    });
		    // 打开监听
		    myShakeEvent.start();
		    // 注册事件
		    window.addEventListener('shake', shakeEventDidOccur, false);
		    //事件成功回调
		    function shakeEventDidOccur () {
		        //put your own code here etc.
		        var sound = document.getElementById("sound");
			    var content_base = document.querySelector(".content_base");
			    var content_re_base =  document.querySelector(".content_re_base");
		        if(count>0){
			        if(!content_base.classList.contains('none')){
			        	getShakeInfo();
			        	content_re_base.classList.remove("none");
				        content_base.classList.add("none");
				    	document.querySelector(".share_btn.share").classList.add("none");
				        content_re_base.classList.add("flip");
			        }else{
			        	content_base.classList.remove("none");
			        	document.querySelector(".big_title").classList.remove("none");
					    document.querySelector(".already").classList.add("none");
					    document.querySelector(".voucher_show").classList.remove("none");
					    document.querySelector(".voucher_none").classList.add("none");
					    document.querySelector(".share_btn.open").classList.remove("none");
				    	document.querySelector(".share_btn.share").classList.add("none");
				        content_re_base.classList.add("none");
				        content_re_base.classList.remove("flip");
			        }
			        sound.play();
		        }else{
		        	content_re_base.classList.remove("none");
				    document.querySelector(".big_title").classList.add("none");
				    document.querySelector(".already").classList.remove("none");
				    document.querySelector(".voucher_show").classList.add("none");
				    document.querySelector(".voucher_none").classList.remove("none");
				    document.querySelector(".share_btn.open").classList.add("none");
				    document.querySelector(".share_btn.share").classList.add("none");
				    content_base.classList.add("none");
				    content_re_base.classList.add("flip");
				    sound.play();
		        }
		       
		    }
		    
		     //获取个人摇一摇信息
		     function getShakeCount(){
		     	var url =  window.location.href;
					var  open_id = request.getQueryStringArgs().open_id;
						var data = {
							open_id:open_id,
						}
						request.requestAjax("post","shake/get",data,function(res){
							console.log(JSON.stringify(res))
							if(res.state == true){
								is_shared = res.data.is_shared;
								count = res.data.count;
								innerCount.innerText = count;
							}
							if(res.code){
								alert(res.error);
							}
						},function(res){
							console.log(JSON.stringify(res));
							alert("网络错误，请刷新重试！")
				})
		     }
		    getShakeCount();
		    
		    //添加个人摇一摇次数
		     function addShakeCount(){
		     	var url =  window.location.href;
					var  open_id = request.getQueryStringArgs().open_id;
						var data = {
							open_id:open_id,
						}
						
						request.requestAjax("post","shake/add",data,function(res){
							console.log(JSON.stringify(res))
							if(res.state == true){
//								getShakeCount();
								window.location.reload();
							}
							if(res.code){
								alert(res.error);
							}
						},function(res){
							console.log(JSON.stringify(res));
							alert("网络错误，请刷新重试！")
				})
		     }
		     
		     
		     //获取摇一摇获得信息
		     function getShakeInfo(){
		     	var url =  window.location.href;
					var  open_id = request.getQueryStringArgs().open_id;
						var data = {
							open_id:open_id,
						}
						request.requestAjax("post","shake/action",data,function(res){
							console.log(JSON.stringify(res));
							if(res.state == true){
//								document.querySelector(".voucher_title").innerText=res.data.title;
//								document.querySelector(".voucher_content").innerText=res.data.desc;
								document.querySelector(".voucher_show").style.cssText="background: url("+res.data.url+") center center no-repeat;background-size: contain;"
								cardId = res.data.card_id;
								if(!res.data.card_id){
									document.querySelector(".share_btn.open").classList.add("none");
									document.querySelector(".share_btn.share").classList.remove("none");
								}else{
									document.querySelector(".share_btn.open").classList.remove("none");
									document.querySelector(".share_btn.share").classList.add("none");
								}
							}
							if(res.code){
								alert(res.error);
							}
							getShakeCount();
						},function(res){
							console.log(JSON.stringify(res));
							alert("网络错误，请刷新重试！")
				})
		     }
		    
		    //微信配置，获取微信config，用来调用微信sdk
		    window.onload = function() {
		    	
			function getConfig(){
				var url =  window.location.href;
				var data = {
						url:url,
					}
					request.requestAjax("post","base/get_sign",data,function(res){
						console.log(JSON.stringify(res))
						if(res.state == true){
							wx.config({
							    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
							    appId: res.data.app_id, // 必填，公众号的唯一标识
							    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
							    nonceStr: res.data.nonce_str, // 必填，生成签名的随机串
							    signature: res.data.sign,// 必填，签名
							    jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline','addCard'] // 必填，需要使用的JS接口列表
							});
						}
						if(res.code){
							alert(res.error);
						}
					},function(res){
						console.log(JSON.stringify(res));
						alert("网络错误，请刷新重试！")
					})
			}
			getConfig();
		    
		    
		    //调用微信分享在ready中
		    var link = "http://api.paradise4d.com/reeserver/index.do?url=shake";
		    wx.ready(function () {
			 	wx.onMenuShareTimeline({
				    title: '稀土密室逃脱', // 分享标题
				    link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				    imgUrl: "https://ylsmserver-1252048467.cos.ap-shanghai.myqcloud.com/share.png", // 分享图标
				    success: function () {
				    // 用户点击了分享后执行的回调函数
				    if(is_shared==0){
				    	addShakeCount();
				    }
				}
			})
			
			wx.onMenuShareAppMessage({
				title: '我正在稀土互娱派发福利，见者有份！', // 分享标题
				desc: '相见恨晚的福利...', // 分享描述
				link: link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: 'https://ylsmserver-1252048467.cos.ap-shanghai.myqcloud.com/share.png', // 分享图标
				type: '', // 分享类型,music、video或link，不填默认为link
				dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
				success: function () {
				// 用户点击了分享后执行的回调函数
					if(is_shared==0){
				    	addShakeCount();
				    }
				}
			});
			
			
			document.getElementById("open").addEventListener("click",openPackage,false);
		    function openPackage(){
		    	getSign();
		    }
		    
		    function getSign(){
						var data = {
							card_id:cardId,
						}
						request.requestAjax("post","card/get_sign",data,function(res){
							console.log(JSON.stringify(res))
							if(res.state == true){
								wx.addCard({
								cardList: [{
								cardId:cardId,
								cardExt:JSON.stringify({timestamp:res.data.timestamp,signature:res.data.sign,nonce_str:res.data.nonce_str})
								}], // 需要添加的卡券列表
								success: function (res) {
									var cardList = res.cardList; // 添加的卡券列表信息
									window.location.reload();
								},
								});
							}
							if(res.code){
								alert(res.error);
							}
						},function(res){
							console.log(JSON.stringify(res));
							alert("网络错误，请刷新重试！")
				})
		    }
		    
			document.getElementById("share").addEventListener("click",shardInfo,false);
		    
		    function shardInfo(){
		    	var sound = document.getElementById("sound");
			    var content_base = document.querySelector(".content_base");
			    var content_re_base =  document.querySelector(".content_re_base");
		    	content_re_base.classList.remove("none");
				document.querySelector(".big_title").classList.add("none");
				document.querySelector(".already").classList.remove("none");
				document.querySelector(".voucher_show").classList.add("none");
				document.querySelector(".voucher_none").classList.remove("none");
				document.querySelector(".share_btn.open").classList.add("none");
				document.querySelector(".share_btn.share").classList.add("none");
				content_base.classList.add("none");
				content_re_base.classList.add("flip");
		    }
		 })
		};
	</script>
</html>
